<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="smohan">
	<meta name="homepage" content="https://smohan.im">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>MoCss - 水墨寒的博客</title>
	<link rel="stylesheet" href="../css/mo.css">
	<link rel="stylesheet" href="demo.css">
	<style type="text/css">
		label.block {
			display: block;
			margin-bottom: 1rem;
		}
	</style>
</head>
<body>
	<article class="demo">
		<a class="demo-back mo-button--fluid mo-button--primary" href="index.html">目录</a>
		<header class="demo-header">
			<h1>Mo-Input</h1>
			<p>
				<a href="http://www.kancloud.cn/smohan/mo-css/281484" target="_blank">input文档</a>
			</p>
		</header>
		</header>
		<main class="demo-body">
			<section class="demo-section">
				<form class="demo-form" onsubmit="return false">
					<fieldset>
						<legend>default</legend>	
						<label class="block">
							<input type="text" class="mo-input" placeholder="placeholder">
						</label>
						<label class="block">
							<input type="text" class="mo-input" placeholder="readonly" readonly>
						</label>
						<label class="block">
							<input type="text" class="mo-input" placeholder="disabled" disabled>
						</label>
					</fieldset>
					<fieldset>
						<legend>primary</legend>	
						<label class="block">
							<input type="text" class="mo-input mo-input--primary" placeholder="placeholder">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--primary" placeholder="readonly" readonly>
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--primary" placeholder="disabled" disabled>
						</label>
					</fieldset>	
					<fieldset>
						<legend>negative</legend>	
						<label class="block">
							<input type="text" class="mo-input mo-input--negative" placeholder="placeholder">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--negative" placeholder="readonly" readonly>
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--negative" placeholder="disabled" disabled>
						</label>
					</fieldset>	
					<fieldset>
						<legend>positive</legend>	
						<label class="block">
							<input type="text" class="mo-input mo-input--positive" placeholder="placeholder">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--positive" placeholder="readonly" readonly>
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--positive" placeholder="disabled" disabled>
						</label>
					</fieldset>	
					<fieldset>
						<legend>small</legend>	
						<label class="block">
							<input type="text" class="mo-input mo-input--small" placeholder="small">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--primary mo-input--small" placeholder="small">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--positive mo-input--small" placeholder="small">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--negative mo-input--small" placeholder="small">
						</label>
					</fieldset>	
					<fieldset>
						<legend>large</legend>	
						<label class="block">
							<input type="text" class="mo-input mo-input--large" placeholder="large">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--primary mo-input--large" placeholder="large">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--positive mo-input--large" placeholder="large">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--negative mo-input--large" placeholder="large">
						</label>
					</fieldset>	
					<fieldset>
						<legend>radius</legend>	
						<label class="block">
							<input type="text" class="mo-input mo-input--radius" placeholder="radius">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--primary mo-input--radius" placeholder="radius">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--positive mo-input--radius" placeholder="radius">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--negative mo-input--radius" placeholder="radius">
						</label>
					</fieldset>	
					<fieldset>
						<legend>pill</legend>	
						<label class="block">
							<input type="text" class="mo-input mo-input--pill" placeholder="pill">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--primary mo-input--pill" placeholder="pill">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--positive mo-input--pill" placeholder="pill">
						</label>
						<label class="block">
							<input type="text" class="mo-input mo-input--negative mo-input--pill" placeholder="pill">
						</label>
					</fieldset>	
					<fieldset>
						<legend>select</legend>	
						<label class="block">
							<select class="mo-input">
								<option>请选择</option>
								<option>mo-input</option>
							</select>
						</label>
						<label class="block">
							<select class="mo-input" disabled>
								<option>请选择</option>
								<option>mo-input</option>
							</select>
						</label>
						<label class="block">
							<select class="mo-input mo-input--primary">
								<option>请选择</option>
								<option>mo-input</option>
							</select>
						</label>
						<label class="block">
							<select class="mo-input mo-input--primary" disabled>
								<option>请选择</option>
								<option>mo-input</option>
							</select>
						</label>
						<label class="block">
							<select class="mo-input mo-input--negative">
								<option>请选择</option>
								<option>mo-input</option>
							</select>
						</label>
						<label class="block">
							<select class="mo-input mo-input--negative" disabled>
								<option>请选择</option>
								<option>mo-input</option>
							</select>
						</label>
						<label class="block">
							<select class="mo-input mo-input--positive">
								<option>请选择</option>
								<option>mo-input</option>
							</select>
						</label>
						<label class="block">
							<select class="mo-input mo-input--positive" disabled>
								<option>请选择</option>
								<option>mo-input</option>
							</select>
						</label>
						<label class="block">
							<select class="mo-input mo-input" multiple>
								<option>请选择</option>
								<option>请选择</option>
								<option>请选择</option>
								<option>请选择</option>
								<option>请选择</option>
								<option>请选择</option>
							</select>
						</label>
						<label class="block">
							<select class="mo-input mo-input" multiple disabled>
								<option>请选择</option>
								<option>请选择</option>
								<option>请选择</option>
								<option>请选择</option>
								<option>请选择</option>
								<option>请选择</option>
							</select>
						</label>
					</fieldset>	
					<fieldset>
						<legend>textarea</legend>	
						<label class="block">
							<textarea rows="3" class="mo-input" placeholder="textarea"></textarea>
						</label>
						<label class="block">
							<textarea rows="3" class="mo-input" placeholder="textarea" disabled></textarea>
						</label>
					</fieldset>
				</form>	
			</section>
		</main>
	</article>

</body>
</html>